<template>
	<view class="container">
		<view class="user-info-box">
			<view class="info-box">
				<text class="line1">{{join_blind_info.blind_name}}-{{ join_blind_info.blind_number }}</text>
				
			</view>
			
		</view>
		<view class="baseinfo">
			<text class="header">详细信息</text>
			<view class="line">
				<text class="title">当前状态</text>
				<text class="value" v-if="join_blind_info.state==0">暂未开奖</text>
				<text class="value" v-if="join_blind_info.state=='1'">{{ join_blind_info.sfjiesuan == 1 ? '已结算' : '等待结算' }}</text>
				<text class="value" v-if="join_blind_info.sfjiesuan=='1'">{{ join_blind_info.sfpc == 1 ? '已拼成' : '未拼成' }}</text>
				<!-- <text class="value" v-if="join_blind_info.sfpc=='0'">未拼成</text> -->
			</view>
			<view class="line">
				<text class="title">参与金额</text>
				<text class="value">{{join_blind_info.money}}</text>
			</view>
			<view class="line">
				<text class="title">参与时间</text>
				<text class="value">{{ join_blind_info.date }}</text>
			</view>
			<view class="line" v-if='join_blind_info.state==0'>
				<text class="title">福卡类型</text>
				<text class="value">{{join_blind_info.leixing}}</text>
			</view>
			<view class="line" v-if='join_blind_info.state==1&&join_blind_info.sfjiesuan==1'>
				<text class="title">实际结算时间</text>
				<text class="value">{{ join_blind_info.sjdate }}</text>
			</view>
			<view class="line" v-if='join_blind_info.state==1'>
				<text class="title">奖励福券</text>
				<text class="value">{{join_blind_info.sjhbfq}}</text>
			</view>
			<view class="line" v-if='join_blind_info.state==1&&join_blind_info.sfjiesuan==1&&join_blind_info.sfpc==0'>
				<text class="title">赠送福卡</text>
				<text class="value">{{zsfk}}</text>
			</view>
			<view class="line" v-if='join_blind_info.state==1&&join_blind_info.sfjiesuan==1&&join_blind_info.sfpc==0'>
				<text class="title">赠送旅游卡</text>
				<text class="value">{{zslyk}}</text>
			</view>
			<view class="line" v-if='join_blind_info.state==1&&join_blind_info.sfjiesuan==1&&join_blind_info.sfpc==0'>
				<text class="title">赠送TAST</text>
				<text class="value">{{sjfhtz}}</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				join_blind_info: {},
				ordercode: 0,
				focusState: -1,
				areaName: '',
				isMyShop: false,
				shopState: 0,
				yujimoney:0
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options){
			this.ordercode = options.orderCode;
		},
		onShow(){
			this.loadShopInfo();
		},
		
		methods: {
			//加载店铺信息
			loadShopInfo(){
				this.$api.post({
					url: '/wanlshop/blindbox/join_blinddetails',
					data: {
						"ordercode": this.ordercode,
					},
					success: res => {
						this.join_blind_info = res;
						this.yujimoney=res.data.centons.yujimoney.toFixed(2);
					}
				});
			},
		
		
		},
		filters: {
			formatDate: function(value) {
				let date = new Date(parseInt(value + '000'));
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? '0' + MM : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? '0' + d : d; //天补0
				let h = date.getHours();
				h = h < 10 ? '0' + h : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? '0' + m : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? '0' + s : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	.user-info-box {
		background-color: #FFFFFF;
		height: 120upx;
		display: flex;
		align-items: center;
		position: relative;
		font-weight: 600;
		text-align: center;
		// padding:  0 $block-row-spacing;
		z-index: 1;
		
		.info-box{
			height: 120upx;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			
			.line1{
				font-size: $font-lg;
				vertical-align: middle;
				
			}
			.line2{
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
		.focus{
			background: linear-gradient(to bottom, #FFA3A3, #FB4242);
			width: 120rpx;
			height: 50rpx;
			color: #FFFFFF;
			border-radius: 25rpx;
			line-height: 50rpx;
			text-align: center;
		}
	}
	.audit-fail-info{
		margin-top: 50upx;
		background-color: #FFFFFF;
		padding: 50upx;
		.header{
			font-size: $font-lg;
			color: $font-color-light;
			height: 32rpx;
			line-height: 32rpx;
		}
	}
	.baseinfo{
		margin-top: 50upx;
		background-color: #FFFFFF;
		padding: 50upx;
		.header{
			font-size:30upx;
			color: $font-color-light;
			height: 32rpx;
			line-height: 32rpx;
		}
		.line{
			margin-top: 50upx;
			height: 40rpx;
			line-height: 40rpx;
			display: flex;
			.title{
				width: 30%;
				color: $font-color-dark;
			}
			.value{
				flex: 1;
				text-align: left;
				padding-right: 8rpx;
			}
			.valueEx{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 50upx;
				}
			}
		}
		.line1{
			margin-top:50upx;
			// height: 40rpx;
			// line-height: 40rpx;
			display: flex;
			.title{
				width: 25%;
			}
			.value{
				flex: 1;
				text-align: right;
				padding-right: 8rpx;
			}
		}
	}
	.iconfont{
		font-size: 80rpx;
		color: #FE7D7D;
	}
</style>
